<template>
	<view class="container-root">
		<view class='head-layout'>
		  <view class='money-format padding-0'>{{"￥"+payMoney}}</view>
		  <text class='pay-state'>支付成功</text>
		</view>
		
		<view class="pay-result-layer" v-for="(item,index) in productBuyResult" :key="index">
			<view class="line"></view>
			
			<view class='pay-result-item'>
			    <view class='item-key'>套餐一</view>
			    {{item.productname}}
			</view>
			
			<view class='pay-result-item'>
			    <view class='item-key'>到期时间</view>
			    {{item.endtime}}
			</view>
			
			<view class="line"></view>
		</view>	
		<view class='height-20' ></view>
		
		<view class='item-value' @tap='toBillRecord'>
		  <view>账单记录</view>
		  <image class='right-image' src='/static/images/right.png'></image>
		</view>
		<view class="line"></view>
		
		<view class='item-value' @tap='toPurchasedProducts'>
		  <view>终端已购产品</view>
		  <image class='right-image' src='/static/images/right.png'></image>
		</view>			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productBuyResult:{},
				payMoney:"0.00"
			}
		},
		onLoad(options) {
			var self = this;
			self.productBuyResult = JSON.parse(options.productBuyResult)
			self.payMoney = options.payMoney
			console.log(self.productBuyResult)
		},
		methods: {
			toBillRecord(){
				uni.navigateTo({
				    url: '/pages/my/bill-record/bill-record',
				})
			},
			toPurchasedProducts(){
				uni.navigateTo({
				    url: '/pages/my/purchased-products/purchased-products',
				})
			}
		}
	}
</script>

<style>
	page {
	  height: 100%;
	  width: 100%;
	  background-color: #f6f6f6;
	  font-size: 32rpx;
	}
	.head-layout{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding:100rpx 0rpx 100rpx 0rpx;
		background-color: white;
	}
	.pay-state{
		color: #999;
		font-size: 28rpx;
	}
	.item-value{
		width: calc(100% - 20rpx);
		padding: 0rpx 0rpx 0rpx 20rpx;
		color: #333;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
	}
	.pay-result-layer{
		width: calc(100% - 40rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content:center;
		background-color: white;
		padding: 0rpx 20rpx 0rpx 20rpx;
	}
	.pay-result-item{
		width: 100%;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: #333;
		background-color: white;
	}

	.right-image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.money-format {
		color: black;
		font-size: 40rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-items: center;
		margin-bottom: 6rpx;
	}
	.padding-0{
		padding: 0
	}
	.white{
		background-color: white;
	}
	.height-20{
		width: 100%;
		height: 20rpx;
	}
	.height-10{
		width: 100%;
		height: 10rpx;
	}
</style>
